<script setup>
  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'left',
      validator: (value) => {
        return ['left', 'center'].includes(value);
      }
    },
    actions: {
      type: Array,
      default: () => [
        {
          id: 'query',
          text: '查询',
          iconName: 'button_query',
          attrs: {
            size: 'small'
          }
        },
        {
          id: 'reset',
          text: '重置',
          iconName: 'button_reset',
          attrs: {
            size: 'small'
          }
        }
      ]
    },
    hasPadding: {
      type: Boolean,
      default: false
    },
    // 是否有更多操作
    hasMore: {
      type: Boolean,
      default: false
    },
    // 是否显示右侧下拉箭头
    isShowFold: {
      type: Boolean,
      default: false
    },
    // 默认是否折叠(默认不折叠)
    isFold: {
      type: Boolean,
      default: false
    },
    // 是否显示左侧竖线
    isShowLeftLine: {
      type: Boolean,
      default: true
    },
    // 是否显示下面的边框
    isShowBorderBottom: {
      type: Boolean,
      default: true
    }
  });
  const slots = useSlots();
  const emits = defineEmits(['on-action-click']);
  const titleClass = computed(() => {
    return {
      'justify-between': props.type === 'left',
      'border-bottom': props.type === 'left' && props.isShowBorderBottom,
      'justify-center': props.type === 'center',
      'mb-20px': props.type === 'center'
    };
  });
  // 判断是否显示操作按钮列表
  const hasActions = computed(() => {
    return props.actions.length && props.type !== 'center';
  });
  let foldFlag = ref(!props.isFold);
  let showMore = ref(true);
  function handleClick(item) {
    emits('on-action-click', item);
  }
</script>

<template>
  <div class="flex flex-col min-h-0">
    <div class="nc-title">
      <div class="flex-y-center py-8px" :class="titleClass">
        <template v-if="type === 'left'">
          <div :class="{ 'left-line': isShowLeftLine }">
            <template v-if="!slots.title && props.title">
              <span> {{ title }}</span>
            </template>
            <template v-if="slots.title">
              <slot name="title"></slot>
            </template>
          </div>
        </template>
        <template v-if="type === 'center'">
          <NstdDivider class="nc-title__center">
            <div class="font-bold">{{ title }}</div>
          </NstdDivider>
        </template>
        <div class="flex-y-center">
          <template v-if="hasActions">
            <NstdButton
              @click="handleClick(button)"
              v-for="button in actions"
              :size="button?.attrs?.size ? button.attrs.size : 'small'"
              v-bind="button?.attrs"
              :key="button.id"
            >
              <SvgIcon class="mr-5px w-16px h-16px" :color="`${button.color}`" :name="`${button.iconName}`" />
              {{ button.text }}
            </NstdButton>
          </template>
          <NstdIcon
            class="ml-12px"
            :size="25"
            :style="{ transform: foldFlag ? 'rotate(270deg)' : 'rotate(90deg)' }"
            @click="foldFlag = !foldFlag"
          >
            <DArrowRight />
          </NstdIcon>
        </div>
      </div>
    </div>
    <Transition mode="out-in" v-if="slots.default">
      <div
        class="relative flex-1 min-h-0"
        :class="{ 'show-more': hasMore && showMore, 'pt-15px': hasPadding }"
        v-show="foldFlag"
      >
        <slot></slot>
        <div
          v-if="hasMore"
          class="absolute bottom-0 right-0 cursor-pointer h-20px text-14px flex-y-center"
          @click="showMore = !showMore"
        >
          <span class="text-#999999">{{ showMore ? '更多' : '收起' }}</span>
          <i-ep-ArrowUp v-show="!showMore" />
          <i-ep-ArrowDown v-show="showMore" />
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
  .border-bottom {
    border-bottom: 2px solid #999999;
  }
  .left-line {
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: inline-block;
      height: 22px;
      width: 0;
      margin-right: 10px;
      border-left: 6px solid #999999;
    }
  }
  .show-more {
    max-height: 115px;
    overflow: hidden;
  }
  .nc-title__center {
    --el-bg-color: #999999;
    --el-border-color: var(--el-bg-color);
    margin: 0;
    ::v-deep(.el-divider__text) {
      width: 200px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      border-radius: 50px;
    }
  }
  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
</style>
